cleanupを使ってuseEffectのネットワークのRece Conditionを避ける
code:ts
export default function Page() {
useEffect(() => {
let ignore = false;
setBio(null);
fetchBio(person).then(result => {
if (!ignore) {
setBio(result);
}
});
return () => {
ignore = true;
};
ignore変数を使ってrace conditionにならないようにしている
通信のresponseの順序は、requestの順序と異なる可能性がある
2回目のfetchのresponseが、1回目より先に返ってくると、
2回目の結果を、古い1回目の結果が上書きしてしまう
ignoreがあることで、
1回目の完了前に、2回目が始まるときに、
1回目のrenderingに着目すると、
1回目の完了前に次のrenderingが始まるので、
cleanupが実行され、
ignoreがtrueになるので、
1回目のsetBioの更新は実行されない
code:ts
export default function Page() {
useEffect(() => {
const abortController = new AbortController();
const fetchData = async () => {
setBio(null);
try {
const result = await fetchBio(person, { signal: abortController.signal });
setBio(result);
} catch (error) {
if (error.name === 'AbortError') {
// リクエストが中止された場合の処理
console.log('Fetch aborted');
} else {
// 他のエラーの処理
console.error('Fetch error:', error);
}
}
};
fetchData();
return () => {
abortController.abort();
};